<!--
  Copyright © 2015 Cask Data, Inc.
  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at
  http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
-->

<!-- TOP PANEL -->
<div class="side-panel top text-center">
<div class="tbl" ng-class="{'batch': TopPanelCtrl.app.type === TopPanelCtrl.GLOBALS.etlBatch, 'realtime': TopPanelCtrl.app.type === TopPanelCtrl.GLOBALS.etlRealtime}">
  <div class="tbl-cell">
    <div class="clearfix">
      <div class="hydrator-detail-metadata">
        <div class="pipeline-type">
          <span ng-if="TopPanelCtrl.app.type === TopPanelCtrl.GLOBALS.etlBatch"
                class="icon-ETLBatch"
                uib-tooltip="Type: Batch"
                tooltip-placement="right"
                tooltip-append-to-body="true"
                tooltip-class="toppanel-tooltip"></span>
          <span ng-if="TopPanelCtrl.app.type === TopPanelCtrl.GLOBALS.etlRealtime"
                class="icon-ETLRealtime"
                uib-tooltip="Type: Realtime"
                tooltip-placement="right"
                tooltip-append-to-body="true"
                tooltip-class="toppanel-tooltip"></span>
        </div>
        <div class="pipeline-name text-left">
          <h1 uib-tooltip="{{ TopPanelCtrl.app.name }}"
              tooltip-placement="right"
              tooltip-enable="TopPanelCtrl.app.name.length > 25"
              tooltip-append-to-body="true"
              tooltip-class="toppanel-tooltip">
            {{ ::TopPanelCtrl.app.name | myEllipsis: 25 }}
          </h1>
          <p tooltip-placement="right"
             tooltip-enable="TopPanelCtrl.app.description.length > 48"
             tooltip-append-to-body="true"
             tooltip-class="toppanel-tooltip"
             uib-tooltip-html="TopPanelCtrl.tooltipDescription">
            {{ ::TopPanelCtrl.app.description | myEllipsis: 48 }}
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="tbl-cell">
    <div class="app-status text-center" ng-class="{'status-green': TopPanelCtrl.isGreenStatus(), 'status-red': !TopPanelCtrl.isGreenStatus() }">
      <span class="fa fa-circle metric-value"></span>
      <span class="metric-label">{{ TopPanelCtrl.appStatus }}</span>
    </div>
  </div>
  <div class="tbl-cell last-run">
    <strong>Last Run</strong>
    <div class="clearfix">
      <div class="metric pull-left">
        <span class="metric-value" ng-if="TopPanelCtrl.lastFinished">{{ TopPanelCtrl.lastFinished.start * 1000 | amDateFormat: 'h:mm:ss A'}} <small>{{ TopPanelCtrl.lastFinished.start * 1000 | amDateFormat: 'MM/DD/YYYY'}}</small></span>
        <span class="metric-value" ng-if="!TopPanelCtrl.lastFinished"> &mdash; </span>
        <span class="metric-label">Start</span>
      </div>
      <div class="metric pull-left">
        <span class="metric-value" ng-if="TopPanelCtrl.lastRunTime === 'N/A'"> &mdash; </span>
        <span class="metric-value" ng-if="TopPanelCtrl.lastRunTime !== 'N/A'">{{ TopPanelCtrl.lastRunTime }}</span>
        <span class="metric-label">Duration</span>
      </div>
    </div>
  </div>
  <div class="tbl-cell all-runs">
    <strong>All Runs</strong>
    <div class="clearfix">
      <div class="metric pull-left" ng-if="TopPanelCtrl.pipelineType === TopPanelCtrl.GLOBALS.etlBatch">
        <span class="metric-value" ng-if="TopPanelCtrl.avgRunTime === 'N/A'"> &mdash; </span>
        <span class="metric-value" ng-if="TopPanelCtrl.avgRunTime !== 'N/A'"> {{ TopPanelCtrl.avgRunTime}}</span>
        <span class="metric-label">Avg Duration</span>
      </div>
      <div class="metric pull-left">
        <span class="metric-value">{{ TopPanelCtrl.runsCount }}</span>
        <span class="metric-label">Total Runs</span>
      </div>
    </div>
  </div>
  <div class="tbl-cell next-run" ng-if="TopPanelCtrl.pipelineType === TopPanelCtrl.GLOBALS.etlBatch">
    <strong>Next Run</strong>
    <div class="clearfix">
      <div class="metric pull-left">
        <span class="metric-value" ng-if="TopPanelCtrl.nextRunTime === 'N/A'"> &mdash; </span>
        <span class="metric-value" ng-if="TopPanelCtrl.nextRunTime !== 'N/A'">
          {{ TopPanelCtrl.nextRunTime | amDateFormat:'h:mm:ss A'}}
          <small> {{ TopPanelCtrl.nextRunTime | amDateFormat:'MM/DD/YYYY'}}</small>
        </span>
        <span class="metric-label" ng-if="TopPanelCtrl.nextRunTime !== 'N/A'">Start</span>
        <span class="metric-label" ng-if="TopPanelCtrl.nextRunTime === 'N/A'">Not Scheduled</span>
      </div>
    </div>
  </div>
  <div class="tbl-cell">
    <!-- Right Buttons Actions -->
    <div class="btn-group action-buttons clearfix" ng-class="{'batch': TopPanelCtrl.app.type === TopPanelCtrl.GLOBALS.etlBatch, 'realtime': TopPanelCtrl.app.type === TopPanelCtrl.GLOBALS.etlRealtime}">
      <!-- IF ETL REALTIME -->
      <div class="pull-left"
        ng-if="TopPanelCtrl.app.type === TopPanelCtrl.GLOBALS.etlRealtime && (['KILLED', 'STOPPED', 'COMPLETED', 'FAILED', 'STARTING'].indexOf(TopPanelCtrl.appStatus) !== -1)">
        <div class="btn"
          ng-click="TopPanelCtrl.do('Start')"
          ng-disabled="TopPanelCtrl.appStatus === 'STARTING'">
          <span ng-if="TopPanelCtrl.appStatus !=='STARTING'">
          <span class="icon-start"
                  uib-tooltip="Run"
                  tooltip-placement="bottom"
                  tooltip-append-to-body="true"
                  tooltip-class="toppanel-tooltip"></span>
          </span>
          <span ng-if="TopPanelCtrl.appStatus === 'STARTING'">
            <span class="fa fa-refresh fa-spin"></span>
          </span>
        </div>
      </div>
      <div class="pull-left"
        ng-if="TopPanelCtrl.app.type === TopPanelCtrl.GLOBALS.etlRealtime && ['RUNNING', 'STOPPING'].indexOf(TopPanelCtrl.appStatus) !== -1">
        <div class="btn"
          ng-click="TopPanelCtrl.do('Stop')"
          ng-disabled="TopPanelCtrl.appStatus === 'STOPPING'">
          <span ng-if="TopPanelCtrl.appStatus !=='STOPPING'">
            <span class="icon-stopped"
                  uib-tooltip="Stop"
                  tooltip-placement="bottom"
                  tooltip-append-to-body="true"
                  tooltip-class="toppanel-tooltip"></span>
          </span>
          <span ng-if="TopPanelCtrl.appStatus === 'STOPPING'">
            <span class="fa fa-refresh fa-spin"></span>
          </span>
        </div>
      </div>
      <!-- IF ETL BATCH -->
      <div class="pull-left"
        ng-if="TopPanelCtrl.app.type === TopPanelCtrl.GLOBALS.etlBatch">
        <div ng-if="['SUSPENDED', 'SCHEDULING'].indexOf(TopPanelCtrl.scheduleStatus) !== -1">

          <div class="btn"
            ng-click="TopPanelCtrl.do('Schedule')"
            ng-disabled="TopPanelCtrl.scheduleStatus === 'SCHEDULING'">
            <span ng-if="TopPanelCtrl.scheduleStatus === 'SUSPENDED'">
              <span class="icon-calendar"
                    uib-tooltip="Schedule"
                    tooltip-placement="bottom"
                    tooltip-append-to-body="true"
                    tooltip-class="toppanel-tooltip"></span>
            </span>
            <span ng-if="TopPanelCtrl.scheduleStatus === 'SCHEDULING'">
              <span class="fa fa-refresh fa-spin"></span>
            </span>
          </div>
        </div>
        <div ng-if="['SCHEDULED', 'SUSPENDING'].indexOf(TopPanelCtrl.scheduleStatus) !== -1">
          <div class="btn"
            ng-click="TopPanelCtrl.do('Suspend')"
            ng-disabled="TopPanelCtrl.scheduleStatus === 'SUSPENDING'">
            <span ng-if="TopPanelCtrl.scheduleStatus ==='SCHEDULED'">
              <span class="icon-suspend"
                    uib-tooltip="Suspend"
                    tooltip-placement="bottom"
                    tooltip-append-to-body="true"
                    tooltip-class="toppanel-tooltip"></span>
            </span>
            <span ng-if="TopPanelCtrl.scheduleStatus === 'SUSPENDING'">
              <span class="fa fa-refresh fa-spin"></span>
            </span>
          </div>
        </div>
      </div>
      <div class="pull-left"
           ng-if="TopPanelCtrl.app.type === TopPanelCtrl.GLOBALS.etlBatch">
        <div ng-if="['STARTING', 'STOPPED', 'COMPLETED', 'FAILED', 'KILLED'].indexOf(TopPanelCtrl.appStatus) !== -1">
          <div class="btn"
               ng-click="TopPanelCtrl.do('Start')"
               ng-disabled="TopPanelCtrl.appStatus === 'STARTING'">
            <span ng-if="TopPanelCtrl.appStatus !== 'STARTING'">
              <span class="icon-start"
                    uib-tooltip="Run"
                    tooltip-placement="bottom"
                    tooltip-append-to-body="true"
                    tooltip-class="toppanel-tooltip"></span>
            </span>
            <span ng-if="TopPanelCtrl.appStatus === 'STARTING'">
              <span class="fa fa-refresh fa-spin"></span>
            </span>
          </div>
        </div>
        <div ng-if="['STOPPING', 'RUNNING'].indexOf(TopPanelCtrl.appStatus) !== -1">
          <div class="btn"
            ng-click="TopPanelCtrl.do('Stop')"
            ng-disabled="TopPanelCtrl.appStatus === 'STOPPING'">
            <span ng-if="TopPanelCtrl.appStatus !== 'STOPPING'">
            <span class="icon-stopped"
                  uib-tooltip="Stop"
                  tooltip-placement="bottom"
                  tooltip-append-to-body="true"
                  tooltip-class="toppanel-tooltip"></span>
            </span>
            <span ng-if="TopPanelCtrl.appStatus === 'STOPPING'">
              <span class="fa fa-refresh fa-spin"></span>
            </span>
          </div>
        </div>
      </div>

      <div class="pull-left">
        <div ui-sref="hydrator.create.studio({data: TopPanelCtrl.config, type: TopPanelCtrl.app.type})" class="btn">
        <span class="icon-clone"
              uib-tooltip="Clone"
              tooltip-placement="bottom"
              tooltip-append-to-body="true"
              tooltip-class="toppanel-tooltip"></span>
        </div>
      </div>
      <div class="pull-left">
        <div class="btn"
             ui-sref="apps.detail.overview.status({ appId: TopPanelCtrl.app.name })">
             <span class="icon-fist"
                   uib-tooltip="View in CDAP"
                   tooltip-placement="bottom"
                   tooltip-append-to-body="true"
                   tooltip-class="toppanel-tooltip"></span>
        </div>
      </div>
      <div class="pull-left">
        <div class="btn"
          ng-click="caskConfirm()"
          cask-confirmable="TopPanelCtrl.do('Delete')"
          data-confirmable-content="Are you sure you want to delete this pipeline?">
          <span class="icon-delete"
                uib-tooltip="Delete"
                tooltip-placement="bottom"
                tooltip-append-to-body="true"
                tooltip-class="toppanel-tooltip"></span>
        </div>
      </div>
    </div>
  </div>
</div>

</div>
